<template>
  <div>
      <el-table :data="store.getters['member/getUserList']" boder  style="width: 100%">
          <el-table-column prop="uid" label="用户编号" width="180" />
          <el-table-column prop="username" label="用户名称" width="180" />
          <el-table-column prop="roleid" label="所属角色" width="180" />
          <el-table-column prop="status" label="状态" width="80" >
            <template v-slot="item">
              <div>
                <el-tag v-if="item.row.status == 1" type="success">启用</el-tag>
                <el-tag v-else type="danger">禁用</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="180">
            <template v-slot="item">
              <div>
                <el-button @click="edit(item.row.uid)" type="primary" size="small" plain>编辑</el-button>
                <el-button @click="del(item.row.uid)" type="danger" size="small" plain>删除</el-button>
              </div>
            </template>
          </el-table-column>
      </el-table>
      <el-pagination @current-change="changepage" background layout="prev, pager, next" :page-size="store.getters['member/getSize']" :total="store.getters['member/getCount']" small="true"/>
  </div>
</template>

<script setup lang="ts">
import { useStore } from 'vuex';
import { defineEmits } from 'vue';
import { userdelete } from '../../request/api';
import { ElMessageBox,ElMessage } from 'element-plus';
let store = useStore();
store.dispatch('member/getUserListAction');
store.dispatch('member/getCountAction');
let emit = defineEmits(['edit']);
let edit = (uid:number)=>{
emit('edit',uid)
};
let changepage = (n:number)=>{
store.dispatch('member/changPageAction',n);
}
let del=(uid:number):void=>{
ElMessageBox.confirm(
  '你确定要删除这条数据吗?',
  '提示',
  {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }
).then(() => {
  userdelete({ uid }).then((res:any)=>{
    if (res.code == 200) {
      ElMessage.success(res.msg)
      store.dispatch('member/getUserListAction');
      store.dispatch('member/getCountAction');
    } else {
      ElMessage.error(res.msg)
    }
  })
}).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除',
    })
})
}
</script>

<style scoped>
.el-button{
  margin: 10px 5px;
}
</style>